<template>
  <div class="text">
    <div class="inp">
        <input type="text" placeholder="输入关键字">
        <button class="btn2">搜索</button>
        <button class="btn">新增</button>
    </div>
    <div class="table1">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>地址</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>丁刚</td>
                    <td>22</td>
                    <td>广东省珠海市斗门区</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

var tablelist = ref([])


</script>

<style scoped>
.inp{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 400px;
}
.inp input{
    padding: 10px 25px;
    border: none;
    border: 1px solid #ccc;
}
.inp .btn2{
    border: none;
    /* border: 1px solid #ccc; */
    padding: 10px 15px;
}
.inp .btn{
    border: none;
    /* border: 1px solid #ccc; */
    padding: 10px 15px;
    color: white;
    background-color: rgb(46, 123, 224);
}
.table1{
    width: 800px;
    height: 100%;
    margin: 10px;
}
.table1 table{
    border: 1px solid #ccc;
    padding: 10px;
}
.table1 table thead{
    font-weight: bold;
    margin-left: 20px;
}
.table1 table tbody{
    padding: 10px;
}
.table1 table tbody tr{
    align-items: center;
}
.table1 table tbody td{
    align-items: center;
    margin-left: 20px;
}
</style>